// 1 引入Postcss
const postcss = require("postcss")
// flex的值
let flexDisplay = ["flex", "inline-flex"]
let flexDirection = ["row", "row-reverse", "column", "column-reverse"]
let flexWrap = ["nowrap", "wrap", "wrap-reverse"]
let flexJustify = ["flex-start", "flex-end", "center", "space-between", "space-around"]
let alignItems = ["stretch", "flex-start", "flex-end", "center", "baseline"];
let alignContent = ["stretch", "flex-start", "flex-end", "center", "space-between", "space-around"];
let alignSelf = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"]
// flex-grow:number
// flex-shrink:number
// flex-basis:number|percentage,auto,content
let flexSpace = ["flex-grow", "flex-shrink", "flex-basis"]

const processed = Symbol('processed')
let flexDefaultOption = {
  display: "flex",
  direction: "row",
  wrap: "nowrap",
  justify: "flex-start",
  alignItems: "stretch",
  alignContent: "stretch",
  alignSelf: "auto",
  flex: "none" //{0 0 auto}
}
/**
 * @type {import('postcss').PluginCreator}
 */
module.exports = (opts = {}) => {
  // Work with options here

  return {
    postcssPlugin: 'postcss-plugin-demo',

    Rule: rule => {
      // 检查重复处理
      if (rule[processed]) {
        return;
      }

      console.log("rule-->", rule.toString())
      //检查display
      let flexOption = {
        display: "",
        direction: "",
        wrap: "",
        justify: "",
        alignItems: "",
        alignContent: "",
        alignSelf: "",
        flex: ""
      }

      // 查找属性
      rule.each(decl => {
        if (decl.prop == "display"
          && (decl.value == "flex" || decl.value == "inline-flex")) {
          flexOption.display = decl.value;
        }
        if (decl.prop == "flex-direction") {
          flexOption.direction = decl.value;
        }
        if (decl.prop == "flex-wrap") {
          flexOption.wrap = decl.value;
        }
        if (decl.prop == "justify-content") {
          flexOption.justify = decl.value;
        }

        if (decl.prop == "flex") {
          flexOption.flex = decl.value;
        }
        if (decl.prop == "align-items") {
          flexOption.alignItems = decl.value;
        }
        if (decl.prop == "align-self") {
          flexOption.alignSelf = decl.value;
        }
      })

      console.log("flexOption", flexOption)
      // 添加新的属性
      if (flexOption.display) {
        let flowValue = "horizontal";
        if (flexOption.direction == "column") {
          flowValue = "vertical";
        }
        if (flexOption.wrap == "wrap") {
          flowValue = "horizontal-wrap";
        }
        rule.append(new postcss.Declaration({ prop: "flex", value: flowValue }));

        if (flexOption.justify == "space-between") {
          rule.append(new postcss.Declaration({ prop: "border-spacing", value: "*" }));
        }
        let tempRule = new postcss.Rule({
          selector: rule.selector + " > *"
        })
        if (flexOption.alignItems == "stretch") {
          tempRule.append(
            new postcss.Declaration({ prop: "height", value: "*" })
          )
        }
        if (flexOption.alignItems == "center") {
          tempRule.append(
            new postcss.Declaration({ prop: "margin-top", value: "*" })
          )
          tempRule.append(
            new postcss.Declaration({ prop: "margin-bottom", value: "*" })
          )
        }
        rule.root().append(tempRule)
      }

      // 子元素 检查align
      if (flexOption.alignSelf == "flex-start") {
        rule.append(
          new postcss.Declaration({ prop: "height", value: "max-content" })
        )
        rule.append(
          new postcss.Declaration({ prop: "margin-top", value: "0" })
        )
      }
      // 子元素 flex
      if (flexOption.flex == "1") {
        rule.append(
          new postcss.Declaration({ prop: "width", value: "1*" })
        )
      }
      rule[processed] = true
    }
  }
}

module.exports.postcss = true
